<template>
  <footer class="footer">
    <span class="todo-count"
      >剩余<strong>{{ arr.length }}</strong></span
    >
    <ul class="filters">
      <li @click="btn('all')">
        <a :class="{ selected: isCon === 'all' }" href="javascript:;">全部</a>
      </li>
      <li @click="btn('no')">
        <a :class="{ selected: isCon === 'no' }" href="javascript:;">未完成</a>
      </li>
      <li @click="btn('ok')">
        <a :class="{ selected: isCon === 'ok' }" href="javascript:;">已完成</a>
      </li>
    </ul>
    <button class="clear-completed" @click="clearBtn">清除已完成</button>
  </footer>
</template>

<script>
export default {
  props: ["arr"],
  data() {
    return {
      isCon: "all",
    };
  },
  methods: {
    btn(str) {
      this.isCon = str; //改变保存高亮的字符串，上面动态class救护自动判断生效
      this.$emit("changeType", str);
    },
    clearBtn() {
      this.$emit("clearType");
    },
  },
};
</script>